import React, { useState, useContext } from "react";

import "antd/dist/antd.css";
import { Modal, Form } from "antd";

import { Observer } from "mobx-react";
// import { Context } from "../../../../../index";
import { Context } from "../../../../../store/MyContext";

import Tab from "../Tabs/Tabs";

function UpdateModal(props) {
  const context = useContext(Context);
  const [form] = Form.useForm();

  const { chinaCity, alOrganization, getAllSingleSet } = props;

  const [confirmLoading, setConfirmLoading] = useState(false);
  const [modalText, setModalText] = useState("Content of the modal");

  // useEffect(() => {
  //   setVisible({visiblecontext.isVisible});
  // });ƒ

  const handleOk = () => {
    setModalText("The modal will be closed after two seconds");
    setConfirmLoading(true);
    setTimeout(() => {
      // setVisible(false);
      context.showModal();
      setConfirmLoading(false);
    }, 2000);
  };

  const handleCancel = () => {
    context.showModal();
  };

  return (
    <Observer>
      {() => (
        <Modal
          title='新增体检项目'
          visible={context.isVisible}
          // visible={true}
          onOk={handleOk}
          confirmLoading={confirmLoading}
          onCancel={handleCancel}
          width={1200}
          footer={null}
          afterClose={() => form.resetFields()}
        >
          <Tab
            chinaCity={chinaCity}
            alOrganization={alOrganization}
            form={form}
            getAllSingleSet={getAllSingleSet}
          ></Tab>
        </Modal>
      )}
    </Observer>
  );
}

export default UpdateModal;
